<template>
  <el-row>
    <el-col :span="6">
      <span>姓名:</span>
    </el-col>
    <el-col :span="18">
      <el-input v-model="name" placeholder="请输入你的名字" />
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="6">
      <span>性别:</span>
    </el-col>
    <el-col :span="18">
      <el-radio-group v-model="gender" class="ml-4">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="6">
      <span>爱好:</span>
    </el-col>
    <el-col :span="18">
      <el-checkbox-group v-model="likeList">
        <el-checkbox label="吃" value="吃" />
        <el-checkbox label="喝" value="喝" />
        <el-checkbox label="玩" value="玩" />
        <el-checkbox label="乐" value="乐" />
      </el-checkbox-group>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="6">
      <span>我的口号:</span>
    </el-col>
    <el-col :span="18">
      <el-input v-model="mycall" type="textarea" placeholder="请输入口号" />
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="6">
    </el-col>
    <el-col :span="18">
      <el-button type="primary" @click="submit">提交</el-button>
    </el-col>
  </el-row>


</template>+


<script setup>
import { ref } from 'vue'

const name = ref('')
const gender = ref('')
const likeList = ref([])
const mycall = ref('')
const submit = ()=>{
  alert('我是${name.value},${gender.value},我喜欢${likeList.value},我的口号是$(my.value)')
}
</script>